<template>
  <div class="item-detail">
    <div class="item-header">
      <div class="top-block">详情</div>
      <div class="top-btn">
        <el-button type="success"
          @click="editDetail">编辑</el-button>
        <el-button type="success">删除</el-button>

      </div><i class="el-icon-close btn-style"
        @click="closeDrawer"></i>
    </div>
    <div class="item-content">
      <el-descriptions title="店铺详情" border :column="1">
        <el-descriptions-item label="店铺名称">{{detailData.name}}</el-descriptions-item>
        <el-descriptions-item label="店铺类型">{{detailData.category}}</el-descriptions-item>
        <el-descriptions-item label="店铺电话">{{detailData.phone}}</el-descriptions-item>
        <el-descriptions-item label="店铺配送费">{{detailData.float_delivery_fee}}</el-descriptions-item>
        <el-descriptions-item label="店铺起送价">{{detailData.float_minimum_order_amount}}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{detailData.opening_hours[0]}}</el-descriptions-item>
        <el-descriptions-item label="店铺介绍">{{detailData.promotion_info}}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{detailData.address}}</el-descriptions-item>
          <el-descriptions-item label="店铺属性">
          <el-tag v-for="(item,index) in detailData.supports" :key="index" size="small">{{item.name}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import bus from '../utils/bus'
export default {
  data () {
    return {
      //drawer: true,
    }
  },
  watch: {

  },
  methods: {
    closeDrawer () {
      console.log(222);
      this.$emit('closeDrawer')
    },
    editDetail () {
      this.$router.push({ name: 'addResturant', params: {type:'edit',value:this.detailData} })
    }
  },
  props: {
    drawerShow: {
      type: Boolean,
    },
    detailData: {
      type: Object,
    }
  },
}
</script>

<style lang="scss" scoped>
.item-detail {
  display: flex;
  flex-direction: column;
  .item-header {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    padding: 0 48px;
    margin-bottom: 28px;
    background-color: #f7f7f7;
    .top-block {
      width: 94%;
      font-size: 18px;
      color: #333333;
    }
    .top-btn {
      display: flex;
    }
  }
  .item-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 34px;
    .info-block {
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      padding-bottom: 33px;
      margin-bottom: 33px;
      .info-block-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding-left: 15px;
        padding-bottom: 17px;
        font-size: 14px;
        color: #333333;
        .detail-label {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          width: 150px;
          margin-right: 20px;
        }
        .detail-value {
          width: 700px;
        }
      }
    }
  }
}
</style>
